.portrait-before, .portrait-before:before {
	stateInitial(1, visible);
}	

.portrait-before:before {
	@extend .befores; 
	box-shadow: inset 0 0 0 100px rgba(0,0,0,0.5);
	setAnimation(portraitBefore 1 0.3s ease-out);
}

/* PORTRAIT BEFORE */
@-webkit-keyframes portraitBefore {
	0% {
		box-shadow: inset 0 0 0 0 rgba(0,0,0,0.5);
		width: 100%;
		height: 74%; 
		top: 0;
		left: 0;
	}
	100% {
		box-shadow: inset 0 0 0 100px rgba(0,0,0,0.5);
		width: 92%;
		height: 64%; 
		top: 9px;
		left: 9px;
	}
}
@-moz-keyframes portraitBefore {
	0% {
		box-shadow: inset 0 0 0 0 rgba(0,0,0,0.5); 
		width: 100%; 
		height: 74%; 
		top: 0;
		left: 0;
	}
	100% {
		box-shadow: inset 0 0 0 100px rgba(0,0,0,0.5); 
		width: 92%; 
		height: 64%; 
		top: 9px;
		left: 9px;
	}
}
@-ms-keyframes portraitBefore {
	0% {
		box-shadow: inset 0 0 0 0 rgba(0,0,0,0.5); 
		width: 100%; 
		height: 74%; 
		top: 0;
		left: 0;
	}100% {
		box-shadow: inset 0 0 0 100px rgba(0,0,0,0.5);
		width: 92%; 
		height: 64%; 
		top: 9px;
		left: 9px;
	}
}
@-o-keyframes portraitBefore {
	0% {box-shadow: inset 0 0 0 0 rgba(0,0,0,0.5); width: 100%; height: 74%; 
	top: 0;
	left: 0;}
	100% {box-shadow: inset 0 0 0 100px rgba(0,0,0,0.5); width: 92%; height: 64%; 
	top: 9px;
	left: 9px;}
}
@keyframes portraitBefore {
	0% {box-shadow: inset 0 0 0 0 rgba(0,0,0,0.5); width: 100%; height: 74%; 
	top: 0;
	left: 0;}
	100% {box-shadow: inset 0 0 0 100px rgba(0,0,0,0.5); width: 92%; height: 64%; 
	top: 9px;
	left: 9px;}
}
